{% extends "base.html" %}
{% load staticfiles %}

{% block title %}用户策略管理{% endblock %}
{% block styles %}
    <style>
        .fixed-table-body {
            height: 70% !important;
        }
    </style>

{% endblock %}

{% block content %}

    <!-- 右侧最上方 -->
{#    <section class="content-header">#}
{#        <h1>#}
{#            用户策略管理#}
{#            <small>{{ allHtml.title }}</small>#}
{#        </h1>#}
{#        <ol class="breadcrumb">#}
{#            <li><a href="#"><i class="fa fa-dashboard"></i>PY</a></li>#}
{#            <li class="active">用户策略管理</li>#}
{#        </ol>#}
{#    </section>#}
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#fa-icons" data-toggle="tab">用户策略管理</a></li>
                    </ul>

                    <div class="tab-content ">
                        <div class="tab-pane active mailbox-messages" id="fa-icons">
                            <div class=" mailbox-messages">
                                <table id="toolbar"></table>
                                <table class="table table-bordered table-striped table-hover" id="InstrumentTable">

                                </table>
                            </div>
                        </div>
                        <div class="tab-pane" id="glyphicons">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- class model 的 add change 模态框 -->
    <div class="modal fade" id="modal_model_field" data-backdrop="static">
        <div class="modal-dialog" style="width: 450px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body" style="padding: 30px;height:auto">
                    <!-- 联合主键，前端要给id，否则后台拿不到id -->
                    <form>
                        <div style="margin-top:3%;display: none"><label>id</label><input class="opts form-control"
                                                                                         id="id" name="id"
                                                                                         type="text" placeholder="id"
                                                                                         style="display: none"></div>
                        <div style="margin-top:3%"><label>策略ID</label><input class="opts form-control" id="ruleid"
                                                                             name="ruleid"
                                                                             type="text" placeholder="策略代码">
                        </div>
                        <div style="margin-top:3%"><label>策略Dll存储位置</label><input class="opts form-control"
                                                                                  id="rulepath"
                                                                                  name="rulepath"
                                                                                  type="text" placeholder="策略Dll存储位置">
                        </div>
                        <div style="margin-top:3%"><label>策略版本</label><input class="opts form-control" id="ruleversion"
                                                                             name="ruleversion"
                                                                             type="text" placeholder="策略版本"></div>
                        <div style="margin-top:3%"><label>策略名称</label><input class="opts form-control" id="rulename"
                                                                             name="rulename"
                                                                             type="text" placeholder="策略名称"></div>
                        <div style="margin-top:3%"><label>策略配置文件存储位置</label><input class="opts form-control"
                                                                                   id="configpath"
                                                                                   name="configpath"
                                                                                   type="text" placeholder="策略配置文件存储位置">
                        </div>
                        <div style="margin-top:3%"><label>用户代码</label>
                            <select name="customerid" id="customerid" class="opts form-control">
                                {% for foo in customerid %}
                                    <option value="{{ foo }}">{{ foo }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div style="margin-top:3%"><label>是否客户端加载</label>
                            <select class="opts form-control" id="isclientloaded" name="isclientloaded">
                                <option name="isclientloaded" value="0">
                                    否
                                </option>
                                <option name="isclientloaded" value="1">
                                    是
                                </option>
                            </select>
                        </div>
                        <div style="margin-top:3%">
                                <span style="margin-left:10%;cursor:pointer;padding:5px" class="btn-primary"
                                      onclick="sub(gets)">提交
                                </span>
                            <span style="cursor:pointer;margin-left:60%;padding:5px" onclick="fad()"
                                  class="btn-success">取消</span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除 -->
    <div class="modal fade" id="modal_delete" data-backdrop="static">
        <div class="modal-dialog" style="width: 300px;background-color:#eee">
            <div class="modal-content">
                <div class="modal-body" style="padding:5px;height:80px;overflow:auto">
                    <div>
                        <p style="margin-top:10px;margin-left:5px;">是否确定删除用户策略</p>
                        <div>
                            <span id="del" sid="" onclick="quit__()"
                                  style="padding:2px;cursor:pointer;float:right;margin-right:10px" class="btn-success">取消</span>
                            <span onclick="del_()" style="padding:2px;cursor:pointer;float:right;margin-right:10px"
                                  class="btn-success">确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}


{% block scripts %}

    <script type="text/javascript">

        function gets() {
            data = {
                'id': JSON.stringify([$('#id').val()]),
                'ruleid': JSON.stringify([$('#ruleid').val()]),
                'rulepath': JSON.stringify([$('#rulepath').val()]),
                'ruleversion': JSON.stringify([$('#ruleversion').val()]),
                'rulename': JSON.stringify([$('#rulename').val()]),
                'configpath': JSON.stringify([$('#configpath').val()]),
                'customerid': JSON.stringify([$('#customerid').val()]),
                'isclientloaded': JSON.stringify([$('#isclientloaded').val()]),
            }
            return data;
        }

        <!--添加，修改-->
        function sub(func) {
            data = func();
            {#联合主键，id，此处不可写id#}
            //对提交的数据进行遍历，json解析成数组取第一个值，然后取Bool值，
            // 如果是false(空)，则alert，并且返回空，不继续执行下面代码
            for (let key in data) {
                var item = JSON.parse(data[key])[0]
                var reg = new RegExp("^[0-9]{1,6}$")
                if (Boolean(item) == false && key != 'isclientloaded' && key != "id") {
                    var title = $("#" + key).prev().text()
                    alert(title + "不能为空!")
                    return
                }
                if (key == 'ruleid' && !reg.test(item)){
                    alert("策略ID为不超过6位的数字!")
                    return;
                }
            }
            $.post("{% url 'Manager:rule_cud' %}", data, function (r) {
                if (r == 'y') {
                    window.location.reload();
                } else {
                    alert(r)
                }
            });
        }

        <!-- 新建,修改,模态框取消按钮 -->
        function fad() {
            $('#modal_model_field').modal('hide');
        }

        <!-- .modal-title:模态框，class modele 的 all 字段 -->
        function modify(id) {
            $('.modal-title').text('修改');
            $("#ruleid").attr('readonly', 'readonly')
            $.get("{% url 'Manager:rule_cud' %}", {'id': id}, function (r) {
                if (r) {
                    for (var key in r) {
                        if ($('#' + key)) {
                            $('#' + key).val(r[key]);
                        }
                    }
                }
            });
        };

        <!--创建-->
        function create() {
            $('.modal-title').text('新建');
            $("#ruleid").removeAttr('readonly', 'readonly')
            $('.opts').val("");
            $('#isclientloaded').val('0')
        };

        <!-- 删除的取消 -->
        function quit__() {
            $('#modal_delete').modal('hide');
        }

        <!-- 删除模态框 -->
        function _delete(d) {
            $('#modal_delete').modal('show');
            $('#del').attr('sid', d);
        }

        <!-- 向后台发送post请求，删除数据库 -->
        function del_() {
            d = $('#del').attr('sid');//该值是从js动态渲染删除里面拿到的，先_delete，再del_
            $.post("{% url 'Manager:rule_cud' %}", {'id': d, 'delete': 1}, function (r) {
                if (r == 'y') {
                    window.location.reload();
                } else {
                    alert(r)
                    $('#modal_delete').modal('hide');
                }
            });//post请求的回调函数，空值show"默认合约不可修改"，y值则删除后跳转。
        };

        function InitBootstrapTable(my_url, my_table_id, my_columns, my_filename) {
            $('#' + my_table_id).bootstrapTable('destroy').bootstrapTable({
                url: my_url,
                method: 'get',
                columns: my_columns,
                toolbar: '#toolbar',
                striped: true,
                cache: false,
                pagination: true,
                sortable: true,
                sortOrder: "asc",
                queryParams: function (pageRequest) {
                    return pageRequest;
                },
                sidePagination: "server",
                pageNumber: 1,
                pageSize: 10,
                pageList: [10, 25, 50, 100],
                search: true,      //这里的search是bootstrap内置的查询方法，同时可以发给后台做判断  
                strictSearch: false,
                showColumns: true,
                showRefresh: true,
                minimumCountColumns: 2,
                clickToSelect: true,
                uniqueId: "Symbol",
                showToggle: true,
                cardView: false,
                detailView: false,
                //showExport: true,
                buttonsAlign: "right",
                exportDataType: "all",
                exportTypes: ['excel'],
                Icons: 'glyphicon-export',
                exportOptions: {
                    fileName: my_filename,
                },
            })
        };

        <!--my_columns field: 'id',从后台取值-->
        my_columns = [
            {
                field: 'ruleid',
                title: '策略ID'
            }, {
                field: 'rulepath',
                title: '策略Dll存储位置'
            }, {
                field: 'ruleversion',
                title: '策略版本'
            }, {
                field: 'rulename',
                title: '策略名称'
            }, {
                field: 'configpath',
                title: '策略配置文件存储位置'
            }, {
                field: 'customerid',
                title: '用户代码'
            }, {
                field: 'isclientloaded',
                title: '是否客户端加载'
            }, {
                field: 'option',
                title: '操作',
                formatter: function (value, row, index) {
                    return "<span onclick=\"modify('" + value + "')\" class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' data-target='#modal_model_field'> <i class='fa fa-pencil'></i>修改</span> " + "&nbsp<span onclick=\"_delete('" + value + "')\" type='button' class='btn btn-danger btn-xs btn-flat btn_operation'> <i class='fa fa-pencil'></i>删除</span> ";
                }
            },
        ];

        <!-- 列表页渲染数据 -->
        InitBootstrapTable("{% url 'Manager:rule_list' %}", "InstrumentTable", my_columns, "symbols");

        <!-- 列表页渲染数据 -->
        $('.fixed-table-toolbar').append("&nbsp <span onclick='create()' type='button' class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' data-target='#modal_model_field'> <i class='fa fa-pencil'></i>新建</span>");

        $('.page-list').css('display', 'none');
        $('.pagination-info').css('display', 'none');

        <!-- 查询框的提示信息 -->
        $('*[placeholder="Search"]').attr('placeholder', '请输入策略ID');
    </script>

    <style>
        .pagination-info {
            display: none
        }

        .page-list {
            display: none
        }

        #fileTable td {
            width: 120px;
            margin-top: 5px
        }

        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            float: right;
            margin-top: 12px;
            margin-right: 5px
        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>

{% endblock %}